<template>
  <div>
    <div v-for="history in historyList" :key="history.id">
      <SingleHistory :history="history" :is-answer="true" @on-answer="onAnswer(history)"></SingleHistory>
    </div>
    <div v-if="historyList.length === 0" class="noData">
      当前没有回答问题！！
    </div>

    <AnswerDialog :show-answer-dialog.sync="showAnswerDialog" :history="answerHistory"></AnswerDialog>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { HistoryService } from "@/services/history.service";
import SingleHistory from "@/components/SingleHistory.vue";
import AnswerDialog from "@/components/AnswerDialog.vue";

@Component({
  name: "MyAnswer",
  components: { AnswerDialog, SingleHistory }
})
export default class MyAnswer extends Vue {
  showAnswerDialog: boolean = false;
  answerHistory: any = {};
  historyList = [];

  mounted() {
    this.getHistoryList();
  }

  getHistoryList() {
    HistoryService.getMyAnswer().then((res: any) => {
      this.historyList = res.histories.map((item: any) => {
        item.answer = item.answer.replace(/\\n/g, "<br>");
        return item;
      });
      this.historyList = this.historyList.reverse();
    }).catch((err: any) => {
      throw new Error(err);
    });
  }

  onAnswer(history: any) {
    this.answerHistory = history;
    this.showAnswerDialog = true;
  }

}
</script>

<style scoped lang="scss">
.noData {
  margin: 200px;
  font-size: 28px;
}
</style>
